<template>
  <div id="myCard">
    <div id="recAvatar">
      <img :src="$store.getters['user/getUser'].avatar|setAvatar" alt="">
    </div>
    <div class="userName">
      <span>{{user.userName}}</span>

      <div v-if="archive.sex=='男'&&type=='student'" class="boy">
        <img src="../../../assets/svg/boy.svg" alt="">
        <span>男</span>
      </div>
      <div v-else-if="archive.sex=='女'&&type=='student'" class="girl">
        <img src="../../../assets/svg/girl.svg" alt="">
        <span>女</span>
      </div>

    </div>
    <div class="userMsg">
      <span v-if="type=='student'">{{archive.age||21}}岁</span>
      <span v-if="type=='student'">|</span>
      <span v-if="type=='student'">{{archive.yearNum}}学生</span>
    </div>
    <div v-if="type=='student'" class="tab">
      <el-button style="width: 100%" type="success" size="small" @click="$router.push('/home/deliveryList')">查看已投递的岗位</el-button>
<!--      <div v-if="type=='student'"><span>46</span><span>沟通过</span></div>-->
<!--      <div v-if="type=='student'"><span>3</span><span>已投递</span></div>-->
<!--      <div v-if="type=='student'"><span>6</span><span>感兴趣</span></div>-->
    </div>

  </div>
</template>

<script>
import {getArchives} from "@/api/user";

export default {
  name: "mycard",
  data(){
    return{
      user:this.$store.getters["user/getUser"],
      archive:{
        age:0,
        yearNum:'',
      },
      type:this.$store.getters["user/getUser"].uType
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      let {uid,uType}=this.$store.getters["user/getUser"]
      getArchives(uType,uid,true).then(res=>{
        this.archive=res.data.extend.student
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
#myCard
  background white
  height 200px
  display flex
  flex-direction column
  justify-content space-between
  padding 10px
#recAvatar
  height 60px
  display flex
  justify-content center
  &>img
    height 100%
    width 60px
    border-radius 50%
.userName,.userMsg
  height 24px
  font-weight 200
  width 100%
  display flex
  justify-content center
  align-items center
  &>span
    margin 0 2px
.boy,.girl
  height 100%
  display flex
  align-items center
  &>img
    height 100%

.tab
  display flex
  justify-content space-around
  &>div
    cursor pointer
    display flex
    flex-direction column
    align-items center
</style>
